import React, { useState, useEffect } from 'react';

import styles from './closure.css';

const set = new Set();

export default function IfClosureKeepSameEveryRender() {
  const [count, setCount] = useState(0);

  // 如果放到 FC 内部，每次 closure 都是不同的函数，即便没有捕获任何 scope 变量
  function closure(a: number) {
    return `a=${a}`;
  }

  useEffect(() => {
    set.add(closure);
    if (set.size <= 3) {
      console.log(set.size);
      setCount(() => set.size);
    }
  });

  return (
    <div className={styles.normal}>
      <h1>Page closure</h1>
      <div>count: {count}</div>
    </div>
  );
}
